@import "ripple";

html {
  font-size: 100px;
}

body {
  font: 12px/1.5 '\5FAE\8F6F\96C5\9ED1', tahoma, '\5b8b\4f53', sans-serif;
  a {
    color: #666;
    text-decoration: none;
  }
}

@baseColor: #e69800;

.center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% -50%);
}
.hcenter() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.vCenter() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* 工具条 */
.toolbar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
  border-top: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  background-color: #fff;
  z-index: 1000;
  .toolbar-in {
    display: flex;
    margin: 0 auto;
    height: 100%;
    width: 970px;
    position: relative;
    justify-content: space-between;
    >div {
      &:nth-of-type(1) {
        display: flex;
        >div {
          &:nth-of-type(1) {
            position: relative;
            z-index: 1000;
            width: 150px;
            height: 41px;
            background: url("../assets/asset 34.png") no-repeat;
            background-position-x: center;
            a {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
          &:nth-of-type(2) {
            &:hover {
              .big-image {
                display: block;
              }
            }
            .big-image {
              position: absolute;
              left: 0;
              top: 0;
              display: none;
            }
          }
        }
      }
      &:nth-of-type(2) {
        display: flex;
        align-items: center;
        font-size: 14px;
        >div {
          a {
            color: #000;
          }
          &:nth-of-type(1) {
            margin-right: 20px;
            a {
              &:hover {
                color: @baseColor;
              }
              display: flex;
              align-items: center;
              i {
                display: inline-block;
                width: 30px;
                height: 30px;
                background: url("../assets/asset 35.png") no-repeat -30px 0;
              }
            }
          }
          &:nth-of-type(2) {
            a {
              display: flex;
              align-items: center;
              i {
                display: block;
                background: url("../assets/asset 35.png") no-repeat 0 0;
                width: 30px;
                height: 30px;
                opacity: .4;
                transform: rotate(90deg);
              }
            }
          }
        }
      }
    }
  }
}

/* 导航条 */
.nav {
  position: fixed;
  left: 0;
  top: 42px;
  width: 100%;
  height: 88px;
  z-index: 999;
  background-image: url("../assets/asset 18.png");
  .nav-in {
    position: relative;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    h1 {
      height: 100%;
      a {
        display: inline-block;
        height: 100%;
        line-height: 88px;
        img {
          width: 129px;
          vertical-align: middle;
        }
      }
    }
    ul {
      display: flex;
      align-items: center;
      padding-left: 46px;
      li {
        font-size: 14px;
        font-weight: bold;
        margin: 0 24px;
        a {
          color: #ccc;
          :hover {
            color: @baseColor;
          }
        }
        &:nth-of-type(3),
        &:nth-of-type(4) {
          a {
            color: @baseColor;
          }
        }
      }
    }
    >div {
      width: 140px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      position: absolute;
      right: 0;
      background-color: @baseColor;
      a {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
      }
    }
  }
}

/* 自定义菜单 */
#myMenu {
  background: url("../assets/asset 33.png") no-repeat;
  position: fixed;
  z-index: 999;
  top: 1.2rem;
  left: .45rem;
  background-size: 106.5%;
  width: 31px;
  height: 7.36rem;
  display: none;
  li {
    position: absolute;
    width: 20px;
    overflow: hidden;
    height: 50px;
    left: 31px;
    transition: all .3s linear 0s;
    &:hover {
      width: 215px;
    }
    a {
      line-height: 50px;
      display: flex;
      justify-content: left;
      align-items: center;
      color: #fff;
      font-size: 14px;
      b {
        font-weight: bold;
        &:hover {
          color: @baseColor;
          &~i,
          &~div {
            display: block;
          }
        }
      }
      i {
        display: none;
        //display: block;
        opacity: 1;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: .04rem 0 .04rem .07rem;
        margin-left: 15px;
        margin-right: 6px;
        //margin: .21rem .06rem 0 .12rem;
        border-color: transparent transparent transparent #e69800;
      }
      div {
        display: none;
        width: 165px;
        height: 50px;
        background-image: url("../assets/sprite.png");
        background-repeat: no-repeat;
        line-height: 30px;
        padding-left: 15px;
        box-sizing: border-box;
        white-space: nowrap;
      }
    }
    &:nth-of-type(2) {
      top: 23px;
      a {
        div {
          background-position:  -1.15rem 0;
        }
      }
    }
    &:nth-of-type(3) {
      top: 185px;
      a {
        div {
          background-position:  -2.85rem 0;
        }
      }
    }
    &:nth-of-type(4) {
      top: 345px;
      a {
        div {
          background-position:  -4.55rem 0;
        }
      }
    }
    &:nth-of-type(5) {
      top: 505px;
      a {
        div {
          background-position:  -6.25rem 0;
        }
      }
    }
    &:nth-of-type(6) {
      top: 665px;
      a {
        div {
          background-position:  -7.95rem 0;
        }
      }
    }
    &.active {
      width: 215px;
      a {
        b {
          color: @baseColor;
        }
        i,div {
          display: block;
        }
      }
    }
  }
  .menu-up, .menu-down {
    width: 100%;
    height: 25px;
    position: absolute;
    left: 0;
    display: block;
  }
  .menu-up {
    top: 0;
  }
  .menu-down {
    bottom: 0;
  }
}

#fullpage {
  /* 第一屏 */
  .section-one {
    background: url("../assets/asset 20.jpeg") no-repeat center center;
    background-size: cover;
    video {
      width: 100%;
      height: 100%;
      // object-fit 相当于背景图片的 background-size
      object-fit: cover;
    }
    .play {
      width: 81px;
      height: 81px;
      background: url("../assets/asset 21.png") no-repeat 0 0;
      .center();
      a {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    >img {
      .hcenter();
      bottom: 2%;
    }
  }

  /* 第二屏 */
  .section-two {
    background: url("../assets/asset 22.jpeg") no-repeat;
    background-size: cover;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title {
      position: absolute;
      top: 4.47rem;
      left: 50%;
      transform: translateX(-50%);
      width: 540px;
      height: 200px;
      span {
        background: url('../assets/asset 21.png') no-repeat;
        background-size: 13.4rem 9.79rem;
        &:nth-of-type(1) {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 4.45rem;
          height: .97rem;
          background-position: -2.48rem -2.17rem;
        }
        &:nth-of-type(2) {
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 4.62rem;
          height: .95rem;
          background-position: -3.26rem -3.21rem;
        }
      }
    }
    h2 {
      position: absolute;
      top: 6.55rem;
      left: 50%;
      width: 5.4rem;
      text-indent: .3rem;
      font-size: .14rem;
      font-style: italic;
      line-height: .2rem;
      color: #fff;
      /* margin-left: -7.26rem; */
      margin-left: -2.7rem;
      z-index: 1;
    }
    .ripper {
      position: absolute;
      left: 55%;
      top: 7.2rem;
      cursor: pointer;
    }
  }

  /* 第三屏 */
  .section-three {
    background: url("../assets/asset 25.jpeg") no-repeat;
    background-size: cover;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title {
      position: absolute;
      top: 4.47rem;
      left: 50%;
      transform: translateX(-50%);
      width: 540px;
      height: 200px;
      span {
        background: url('../assets/asset 21.png') no-repeat;
        background-size: 13.4rem 9.79rem;
        &:nth-of-type(1) {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 4.45rem;
          height: .97rem;
          background-position: -7.93rem -2.17rem;
        }
        &:nth-of-type(2) {
          display: block;
          position: absolute;
          bottom: 0;
          right: 0;
          width: 4.62rem;
          height: .95rem;
          background-position: -8.53rem -3.32rem;
        }
      }
    }
    h2 {
      position: absolute;
      top: 6.55rem;
      left: 50%;
      width: 5.4rem;
      text-indent: .3rem;
      font-size: .14rem;
      font-style: italic;
      line-height: .2rem;
      color: #fff;
      /* margin-left: -7.26rem; */
      margin-left: -2.7rem;
      z-index: 1;
    }
    .ripper {
      position: absolute;
      left: 55%;
      top: 7.2rem;
      cursor: pointer;
    }
  }

  /* 第四屏 */
  .section-four {
    .title {
      width: 727px;
      height: 81px;
      background: url("../assets/asset 21.png") no-repeat 0 -425px;
      position: absolute;
      .hcenter();
      top: 22%;
    }
    .weather {
      position: absolute;
      top: 7.2rem;
      left: 50%;
      text-align: center;
      width: 225px;
      margin-left: -3.4rem;
      i {
        display: block;
        width: 114px;
        height: 78px;
        background: url('../assets/asset 21.png') no-repeat 0 -768px;
        margin: 0 auto;
      }
      b {
        font-size: 20px;
        color: @baseColor;
      }
      span {
        display: block;
        width: 20px;
        height: 1px;
        background: @baseColor;
        margin: 0 auto 10px;
      }
      p {
        color: @baseColor;
      }
    }
    .terrain {
      position: absolute;
      top: 7.2rem;
      left: 50%;
      text-align: center;
      width: 225px;
      margin-left: 1.15rem;
      i {
        display: block;
        width: 120px;
        height: 78px;
        background: url('../assets/asset 21.png') no-repeat -113px -686px;
        margin: 0 auto;
      }
      b {
        font-size: 20px;
        color: #fff;
      }
      span {
        display: block;
        width: 20px;
        height: 1px;
        background: #fff;
        margin: 0 auto 10px;
      }
      p {
        color: #fff;
      }
    }
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      background-color: #000;
      li {
        width: 33%;
        height: 100%;
        transition: all .3s ease-in-out 0s;
        position: relative;
        overflow: hidden;
        img {
          position: absolute;
          top: 0;
          transition: all 1s ease-in-out .3s;
          opacity: 0.6;
        }
        h3 {
          width: 93px;
          height: 68px;
          background: url("../assets/asset 21.png") no-repeat -238px -685px;
          .center();
          transition: all .3s ease-in-out .3s;
        }
        &:nth-of-type(1) {
          img {
            left: -180px;
          }
        }
        &:nth-of-type(2) {
          width: 34%;
          img {
            left: -10%;
          }
          h3 {
            background-position: -336px -685px;
          }
        }
        &:nth-of-type(3) {
          img {
            right: -180px;
          }
          h3 {
            background-position: -433px -685px;
          }
        }
      }
    }
  }

  /* 第五屏 */
  .section-five {
    background: url("../assets/asset 29.jpeg") no-repeat;
    background-size: cover;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .title {
      position: absolute;
      top: 4.18rem;
      left: 50%;
      transform: translateX(-50%);
      width: 7.49rem;
      height: .81rem;
      span {
        background: url('../assets/asset 21.png') no-repeat;
        background-size: 13.4rem 9.79rem;
        &:nth-of-type(1) {
          display: block;
          position: absolute;
          top: 0;
          left: 1.3rem;
          width: 3.69rem;
          height: .81rem;
          background-position: 0 -5.09rem;
        }
        &:nth-of-type(2) {
          display: block;
          position: absolute;
          top: .95rem;
          right: 1.3rem;
          width: 3.73rem;
          height: .82rem;
          background-position: -3.77rem -5.08rem;
        }
      }
    }
    h2 {
      position: absolute;
      /* top: 2.58rem; */
      top: 6.08rem;
      left: 50%;
      width: 5rem;
      text-align: center;
      font-size: .14rem;
      line-height: .2rem;
      color: #fff;
      /* margin-left: -2.5rem; */
      margin-left: -3.3rem;
    }
    .ripper {
      position: absolute;
      top: 6.5rem;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
    }
  }

  /* 第六屏 */
  .section-six {
    background: url("../assets/asset 30.jpeg") no-repeat;
    background-size: cover;
    .one {
      position: absolute;
      top: 50%;
      left: 35%;
      cursor: pointer;
      video {
        width: 450px;
        height: 450px;
        border-radius: 50%;
        .vCenter();
        right: -4.6rem;
        display: none;
      }
      &:hover {
        video {
          display: block;
        }
      }
    }
    .two {
      position: absolute;
      top: 70%;
      left: 58%;
      cursor: pointer;
      video {
        width: 450px;
        height: 450px;
        border-radius: 50%;
        .vCenter();
        left: -4.6rem;
        display: none;
      }
      &:hover {
        video {
          display: block;
        }
      }
    }
  }

  /* 第七屏 */
  .section-seven {
    background-color: #000;
    .footer-in {
      width: 1200px;
      margin: 0 auto;
      height: 160px;
      display: flex;
      padding-top: 20px;
      box-sizing: border-box;
      align-items: center;
      .footer-left {
        display: flex;
        align-items: center;
        margin-right: 45px;
        a {
          display: block;
          width: 180px;
          height: 35px;
          background: url("../assets/asset 31.png") no-repeat;
        }
        span {
          display: block;
          width: 66px;
          height: 56px;
          background: url("../assets/asset 32.png") no-repeat -627px -172px;
        }
      }
      .footer-right {
        p {
          color: #676767;
        }
        a {
          color: #676767;
          img {
            vertical-align: middle;
            margin-right: 3px;
            display: inline;
          }
        }
        span {
          padding: 0 10px;
          color: #676767;
        }
      }
    }
  }

}

/* 提示图标 */
.tips {
  .hcenter();
  bottom: 30px;
  width: 25px;
  height: 80px;
  background: url("../assets/asset 21.png") no-repeat -85px 0;
  z-index: 999;
}
